<template>
  <div id='list'>
 <ul>
      <li v-for="(item,index) in $store.state.list" :key="index">
        <span>
          <input type="checkbox" id="check" @click="check"/>
         <input type="text" :value="item" class="val">
        </span>
        <button @click="del(item)">删除</button>
      </li>
    </ul>
 </div>
</template>

<script>
export default {
components: {
//定义 组件
  },
  data() { 
//接受数据      
    return {
    
}
  },
mounted() {
//挂载后 进入页面加载
  },    
  created() {

  },
  methods:{
//方法 函数
check(){

},
del(item){
  this.$store.commit('del',item)
}
  },
filters: {
//过滤，筛选
},
computed: {
//计算
},
//监听
watch: {
//被监听者名称
route: {
//是否一进入页面就开始监听
 immediate: false, 
//执行函数
handler(newVal, oldVal) {},
//是否深度监听
deep: false,
},
},
 }
</script>

<style scoped lang='scss'>
#list{
    width: 100%;
    ul{
      width: 600px;
      margin: auto;
      li{
          list-style: none;
          width: 100%;
          height: 40px;
          border: 1px solid black;
          border-left: 2px solid green;
          display: flex;
          justify-content: space-between;
          align-items: center;
          #check{
              width: 20px;
              height: 20px;
          }
          .val{
              height: 20px;
          }
          button{
              border: none;
          }
      }
     
  }
}
 
</style>